/* pages/luck/components/luck-card/index.wxss */
.luck-card-container {
  width: 100%;
  display: flex;
  justify-content: center;
  .luck-card {
    width: 90vw;
    min-height: 650rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    position: relative;
  }

  .bg-top {
    height: 10vh;
    width: 100%;
    position: absolute;
    background-color: #a1a0ed;
    z-index: 0;
  }
}

.luck-card {
  // 顶部
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  .top {
    // 卡片左侧
    display: flex;
    justify-content: space-between;
    width: 100%;
    .card-left {
      display: flex;
      flex-direction: column;
      width: 30%;
      align-items: center;
      color: #a1a0ed;
      .avater {
        width: 134rpx;
        height: 134rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .desc {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 20rpx 0;
        .title {
          font-size: 40rpx;
        }
        .date {
          font-size: 20rpx;
          padding: 10rpx 0;
        }
        .day {
          display: flex;
          flex-direction: column;
          padding: 5rpx 10rpx;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
        }
      }
    }
    // 卡片右侧
    .card-right {
      margin: 0 auto;
      color: #a1a0ed;
      .title {
        font-size: 28rpx;
        padding: 30rpx 0;
      }
      .luck-item {
        padding: 6rpx 0;
        font-size: 22rpx;
        display: flex;
      }
    }
  }
  // 中间
  .middle {
    color: #a1a0ed;
    font-size: 24rpx;
    text-indent: 2em;
    padding: 40rpx 0 70rpx;
    line-height: 36rpx;
  }
  // 底部
  .bottom {
    display: flex;
    justify-content: flex-end;
    view {
      color: #fff;
      font-size: 24rpx;
      padding: 20rpx 30rpx;
      border-radius: 40rpx;
      background-color: #a1a0ed;
      margin-left: 20rpx;
    }
    view:nth-child(2) {
      background-color: #feba82;
    }
  }
}
